import React, {Component} from 'react'
import ActivityPoster from '../../images/activity-poster.png'
import {Col, Row} from "antd"
import isMobile from '../../constant/client-util'

const pcContentStyle = {
  padding: '0.2rem 0.2rem 0 .2rem',
  height: '100%',
  lineHeight: '30px',
}
const mobileContentStyle = {
  padding: '.2rem',
  marginTop: '.2rem',
}

class ActivityTopic extends Component {
  render() {
    return <div className='box-padding'>
      <Row type="flex" justify='center'>
        <h3 className='title'>活动主题
          <span className='title_underline'/></h3>
      </Row>
      <Row type="flex" justify='center'>
        <div className='PC_box'>
          <Row type="flex" style={{
            height: '100%',
            marginRight: isMobile() ? 0 : '-45px'
          }} gutter={isMobile() ? 0 : 40}>
            <Col xs={{span: 24}} lg={{span: 15}}>
              <div style={{
                background: '#26bdcf',
                height: '1.6rem',
                color: 'white',
                textAlign: 'center'
              }}>
                <Row type="flex" justify='center' align='middle'
                     style={{
                       height: '100%',
                       fontSize: '20px',
                       fontWeight: 'lighter'
                     }}>
                  Make your mark in Tech <br/>在科技成就自我</Row>
              </div>
              <div className='tws-4th-video-KarenStory'
                   style={{marginTop: '.1rem '}}>
                <video className='video-js vjs-16-9 vjs-big-play-centered' controls preload='auto'

                       poster={ActivityPoster} data-setup='{}'>
                  <source src='https://s3.cn-north-1.amazonaws.com.cn/live-video/%E7%BB%93%E5%AF%B9%E7%BC%96%E7%A8%8B-Karen+Lee+-+Chinese+subs.mp4' type='video/mp4'/>
                </video>

              </div>
            </Col>

            <Col xs={{span: 24}} lg={{span: 8}} className='gray-bg ' style={
              isMobile() ? mobileContentStyle : pcContentStyle
            }>
              <p>听说你充满创意、想法与好奇，想用代码和咖啡因来点燃这个世界。</p>
              <p>听说你渴望抓住机遇并引领变革、你善于沟通希望拥抱开放、你不囿于现状想触碰代码之美。</p>
              <p>在这里，你将面临新的对话、新的期望、新的技术构建和使用方式。</p>
              <p>我们坚持不拘一格的理念，无论性别、肤色与专业，希望以代码，为世界带来真实而积极的变革。</p>
              <p>当然，这里没有孤身作战的英雄，结对编程只是开始。</p>
              <p>欢迎加入我们，一起在科技成就自我！</p>
            </Col>

          </Row>
        </div>
      </Row>

    </div>
  }

}

export default ActivityTopic



